import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../../theme/vars.css';
import { fallBackGlobalStyle } from '../../tools/utils';

export const filesStyle = style({
	display: 'flex',
	userSelect: 'none',
	flexDirection: 'row',
	alignItems: 'center',
	flexWrap: 'wrap',
	// gap: '5px',
	selectors: {
		'&.list': {
			display: 'grid',
			gridTemplateColumns: 'repeat(auto-fit, minmax(20em, 1fr));',
		},
		'&.disabled': {
			pointerEvents: 'none',
			opacity: '0.5',
		},
	},
});

globalStyle(`${filesStyle}>div.dropping:after`, {
	content: ' ',
	position: 'absolute',
	display: 'block',
	left: 0,
	top: 0,
	right: 0,
	height: '100%',
	backgroundColor: vars.color.accent,
	opacity: 0.5,
});

globalStyle(`${filesStyle}>div`, {
	display: 'flex',
	position: 'relative',
	flexDirection: 'column',
	alignItems: 'stretch',
	justifyContent: 'center',
	width: '6em',
	height: '6em',
	margin: '0.4em',
	backgroundColor: vars.color.panelBackground,
	border: `1px solid ${vars.color.border}`,
	overflow: 'hidden',
	outline: 'none',
	borderRadius: '0.5em',
});

globalStyle(`${filesStyle}>div:focus`, {
	backgroundColor: vars.color.selection,
	outline: `1px solid ${vars.color.accent}`,
});

globalStyle(`${filesStyle}.list>div`, {
	flexDirection: 'row',
	alignItems: 'center',
	justifyContent: 'flex-start',
	width: 'auto',
	height: '4em',
	padding: '0 0.2em',
});

globalStyle(`${filesStyle}>div>div.icon`, {
	flexShrink: 0,
	position: 'relative',
	top: '-0.5em',
	alignSelf: 'center',
	width: '3em',
	height: '3em',
});

globalStyle(`${filesStyle}.list>div>div.icon`, {
	top: '0',
});
globalStyle(`${filesStyle}>div>img`, {
	objectFit: 'cover',
	flex: 1,
});

globalStyle(`${filesStyle}.list>div>img`, {
	width: '3em',
	height: '3em',
	margin: '0 0.3em',
	flexShrink: 0,
	flexGrow: 0,
});

globalStyle(`${filesStyle}>div>div.name`, {
	position: 'absolute',
	left: 0,
	bottom: 0,
	right: 0,
	height: '1.5em',
	lineHeight: '1.5em',
	textAlign: 'center',
	overflow: 'hidden',
	textOverflow: 'ellipsis',
	whiteSpace: 'nowrap',
	backgroundColor: 'light-dark(#666, #222)',
	color: 'white',
	fontSize: '0.8em',
	padding: '0 0.1em',
});

fallBackGlobalStyle(
	`${filesStyle}>div>div.name`,
	{
		backgroundColor: '#666',
	},
	{
		backgroundColor: '#222',
	}
);

globalStyle(`${filesStyle}.list>div>div.name`, {
	position: 'static',
	height: 'auto',
	lineHeight: '1.25em',
	textAlign: 'left',
	whiteSpace: 'normal',
	color: vars.color.text,
	backgroundColor: 'transparent',
	fontSize: '1em',
	maxHeight: '2.5em',
	paddingRight: '0.2em',
});

globalStyle(`${filesStyle}>div>div.del`, {
	position: 'absolute',
	left: '0',
	right: '0',
	bottom: '-2em',
	height: '2em',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	transition: 'bottom 200ms',
	backgroundColor: vars.color.danger,
	fill: 'white',
});

globalStyle(`${filesStyle}.list>div>div.del`, {
	left: 'auto',
	top: '0',
	right: '-4em',
	bottom: '0',
	height: 'auto',
	width: '4em',
	transition: 'right 200ms',
	cursor: 'pointer',
});

globalStyle(`${filesStyle}>div>div.del>svg`, {
	width: '1em',
	height: '1em',
});

globalStyle(`${filesStyle}.list>div>div.del>svg`, {
	width: '1.4em',
	height: '1.4em',
});

globalStyle(`${filesStyle}.icon>div:hover>div.del`, {
	bottom: '0',
});

globalStyle(`${filesStyle}.list>div:hover>div.del`, {
	right: '0',
});

globalStyle(`${filesStyle}>div.draging`, {
	opacity: 0.3,
});

globalStyle(`${filesStyle}.icon>div.draging:hover>div.del`, {
	bottom: '-2em',
});

globalStyle(`${filesStyle}.list>div.draging:hover>div.del`, {
	right: '-4em',
});

globalStyle(`${filesStyle}>div.add`, {
	boxSizing: 'border-box',
	alignItems: 'center',
	justifyContent: 'center',
	border: `2px dotted ${vars.color.border}`,
	backgroundColor: 'transparent',
	cursor: 'pointer',
});

globalStyle(`${filesStyle}>div.add:hover`, {
	backgroundColor: vars.color.selectionBlur,
});

globalStyle(`${filesStyle}>div.add>svg`, {
	width: '2em',
	height: '2em',
});

globalStyle(`${filesStyle}.list>div`, {
	display: 'flex',
});
